<script setup lang="tsx">

// @ts-ignore
import CommonTable from "@c/common-table";
// @ts-ignore
import CommonForm from "@c/common-form";
import type {
    IFilterChangeParams,
    ISortChangeParams
    // @ts-ignore
} from "@c/common-table/type";
// @ts-ignore
import type { IFormProps } from "@c/common-form/type";
import { FormInstance } from "element-plus/es/components/form";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { getRoleList } from "./service";

/**
 *  vue3 setup 注册子组件
    import Test from "./test.vue";
    const app = createApp({});
    app.component("Test", Test);
 */

const editRole = (row: any) => {

}

const assignPermission = (row: any) => {

}

const deleteRole = (row: any) => {

}
// https://blog.csdn.net/Perback/article/details/135204813 【Vue3干货】template setup 和 tsx 的混合开发实践
const Operate = defineComponent({
    props: {
        data: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { data: row } = props;
        return () => {
            return <div class="operate_tags" >
                <el-button type="primary" plain size='small' onClick={() => editRole(row)}>编辑</el-button>
                <el-button type="warning" plain size='small' onClick={() => assignPermission(row)}>分配权限</el-button>
                <el-button type="danger" size='small' onClick={() => deleteRole(row)}>删除</el-button>
            </div >
        }
    }
});

const SLOT_ITEMS = [{
    name: "Operate",
    component: Operate
}]

const tableRef = ref<InstanceType<typeof CommonTable> | null>(null);
const dataSource = reactive<any>({
    columns: [
        {
            label: "序号",
            prop: "id",
        },
        {
            label: "角色名称",
            prop: "name",
        },
        {
            label: "创建时间",
            prop: "createTime",
            width: 250
        },
        {
            label: "操作",
            slot: "Operate",
            component: Operate,
            width: 220
        }
    ],
    data: [],
    pigination: {
        total: 0,
        size: 10,
        current: 1,
        pages: 0
    }
});

onMounted(() => {
    getRoleList({
        page: 1,
        size: 10
    }).then(res => {
        const { items, total, size, current, pages } = res.data;
        dataSource.data = items;
        dataSource.pigination.total = total;
        dataSource.pigination.size = size;
        dataSource.pigination.current = current;
        dataSource.pigination.pages = pages;
    })
})

const onSortChange = (sortInfo: ISortChangeParams) => {
    const { prop, order } = sortInfo;
    // order === 'ascending', 传递 prop
    // order === 'descending', 传递 -prop
    console.log(prop, order, "sortInfo");
};

const onFilterChange = (filter: IFilterChangeParams) => {
    console.log(filter, "filter");
};

const form = reactive<IFormProps>({
    formItems: [],
    formData: {}
});
const myFormRef = ref<InstanceType<typeof CommonForm>>();

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log("submit!", form.formData);
        } else {
            console.log("error submit!", fields);
        }
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
</script>

<template>
    <common-form ref="myFormRef" :form="form" inline>
        <!-- eslint-disable-next-line vue/no-lone-template -->
        <!-- eslint-disable-next-line vue/valid-attribute-name -->
        <template #="{ formRef }">
            <el-button type="primary" @click="submitForm(formRef)"> 搜索 </el-button>
            <el-button @click="resetForm(formRef)">重置</el-button>
        </template>
    </common-form>
    <common-table ref="tableRef" :data-source="dataSource" @sort-change="onSortChange" @filter-change="onFilterChange">
        <template v-for="(item, index) in SLOT_ITEMS" #[item.name]="{ row }" :key="index">
            <component :is="item.component" :data="row"></component>
        </template>
    </common-table>
</template>

<style scoped lang="scss">
.operate_tags {
    display: flex;
    justify-content: space-between;

    ::v-deep .el-tag {
        cursor: pointer;
    }
}
</style>
